<%--
  Created by IntelliJ IDEA.
  User: aiwzy
  Date: 2022/4/16
  Time: 17:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" href="css/login.css" type="text/css">
    <link rel="stylesheet" href="css/head.css" type="text/css">

</head>
<body>
<script type="text/javascript">
    var http_request ="<%=request.getContextPath() %>";
</script>
<%--共同的顶部--%>
<jsp:include page="head.jsp"/>
<div class="d9" style="display: flex;justify-content: center">
    <a style="text-align: center;font-size: 20px;padding-top: 41px;margin-left: -150px;text-decoration: none;color: #333333" href="register.jsp">注册</a>
    <p style="text-align: center;font-size: 20px;padding-top: 20px;margin-left: 50px">|</p>
    <a style="text-align: center;font-size: 20px;padding-top: 41px;margin-left: 50px ;text-decoration: none;color: #333333"href="login.jsp">登&nbsp;录</a>
</div>
<div class="d6">

    <div class="d7">
        <form >
            <ul>
                <li style="border-bottom: 1px solid #999;">
                    <label>昵称：</label>
                    <input type="text" id="user" name="username"  maxlength="11" pattern="^[1][3,4,5,7,8][0-9]{9}$" required style="border: none;background: rgba(0,0,0,0);"/>
                </li>

                <li>
                    <label>密  码：</label>
                    <input  type="password" id="pass" name="password"  maxlength="6" required style="border: none;background: rgba(0,0,0,0);"/>
                </li>
            </ul>
        </form>
            <p>
                <label>
                    <input type="checkbox"/>&nbsp;下次自动登录
                </label>
                <a href="#" class="a20" style="float: right">忘记密码</a>
            </p>
            <p>登录即代表你同意美食天下《<a class="a20" href="#" >用户协议</a>》和《<a class="a20" href="#">隐私政策</a>》</p>
        <button  onclick="login()" value=""  style="width: 300px;background-color: red;height: 40px">登&nbsp;录</button>
    </div>

    <div class="d8">
        <img src="image/app1.png" style="width: 110px;height: 100px;"/>
        <p class="p1">扫描二维码下载客户端</p>
        <span >
            <a href="" title="QQ登录"><img src="image/q1%20.png" style="width: 30px;height: 30px"/></a>
            <a href="" title="微信登录"><img src="image/wb1.png" style="width: 30px;height: 30px"/></a>
            <a href="" title="微博登录"><img src="image/wx1.png" style="width: 30px;height: 30px"/></a>
        </span>
    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function login(){
            var username = $("#user").val();
            var password = $("#pass").val();
            $.ajax({
                //几个参数需要注意一下
                dataType: "text",
                url: http_request+"/login" ,
                data: {
                    user1:username,
                    pass:password
                },
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if(result.indexOf("登录成功") != -1 ){
                        console.log(1)
                        console.log(http_request)
                        $.ajax({
                            url:http_request+"/index.jsp",
                            data:{
                                state:"yes"
                            },
                            dataType:"text",
                            success:function (){
                                alert("登录跳转首页成功！")
                                window.location.href=http_request+"/index.jsp"
                            },
                            error:function (){
                                alert("登陆跳转首页失败！")
                            }
                        })
                    }else{
                        window.location.href=http_request+"/login.jsp"
                        // $.ajax({
                        //     url:"/login.jsp",
                        //     data:{},
                        //     dataType:"text",
                        //     success:function (){
                        //         alert("登录失败请重新登录！")
                        //     },
                        //     error:function (){
                        //
                        //     }
                        // })
                    }

                },
                error : function() {
                    alert("异常！");

                }
            });

        }


    </script>

</div>
</body>
</html>
